<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
    <title>个人注册</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

    <link rel="stylesheet" type="text/css" href="../Login/css/all.css" />
    <link rel="stylesheet" type="text/css" href="../Login/css/pages-register.css" />
    <script type="text/javascript" src="../Login/js/all.js"></script>
    <script type="text/javascript" src="../Login/js/pages/register.js"></script>

</head>
<body>
<div class="register py-container ">
{{--    <!--head-->--}}
{{--    <div class="logoArea">--}}
{{--        <img src="../Login/register/hhh.png" style="margin-top: 50px">--}}
{{--    </div>--}}
    <!--register-->
    <div class="registerArea">
        <h3><span class="go">我有账号，去<a href="login.html" target="_blank">登陆</a></span></h3>
        <div class="info">
            <!-- /resources/views/post/create.blade.php -->
            <h1>注册新用户</h1>
            @if ($errors->any())
                <div class="alert alert-danger">
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
        @endif

        <!-- Create Post Form -->
            <form action="doregister" method="post" id="reg_form" class="sui-form form-horizontal">
                @csrf
                <div class="control-group">
                    <label class="control-label">用户名：</label>
                    <div class="controls">
                        <input type="text" id="username" name="username" placeholder="请输入你的用户名" class="input-xfat input-xlarge">
                        <span class="error"></span>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label">手机号：</label>
                    <div class="controls">
                        <input type="text" id="phone" name="phone" placeholder="请输入你的手机号" class="input-xfat input-xlarge">
                        <span class="error"></span>
                    </div>
                </div>
                <div class="control-group">
                    <label for="inputPassword" class="control-label">验证码：</label>
                    <div class="controls">
                        <input type="text" id="code" name="code" placeholder="验证码" class="input-xfat input-xlarge" style="width:120px">
                        <button type="button" class="btn-xlarge" id="sendCode">发送验证码</button>
                        <span class="error"></span>
                    </div>
                </div>
                <div class="control-group">
                    <label for="inputPassword" class="control-label">登录密码：</label>
                    <div class="controls">
                        <input type="password" id="password" name="password" placeholder="设置登录密码" class="input-xfat input-xlarge">
                        <span class="error"></span>
                    </div>
                </div>
                <div class="control-group">
                    <label for="inputPassword" class="control-label">确认密码：</label>
                    <div class="controls">
                        <input type="password" id="repassword" name="repassword" placeholder="再次确认密码" class="input-xfat input-xlarge">
                        <span class="error"></span>
                    </div>
                </div>
                <div class="control-group">
                    <label for="inputPassword" class="control-label">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
                    <div class="controls">
                        <input name="m1" type="checkbox" checked="" id="reg_btn"><span>同意协议并注册《品优购用户协议》</span>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label"></label>
                    <div class="controls btn-reg">
                        <button>确认注册新账号</button>
                    </div>
                </div>
            </form>
            <div class="clearfix"></div>
        </div>
    </div>
    <!--foot-->
    <div class="py-container copyright">
        <ul>
            <li>关于我们</li>
            <li>联系我们</li>
            <li>联系客服</li>
            <li>商家入驻</li>
            <li>营销中心</li>
            <li>手机品优购</li>
            <li>销售联盟</li>
            <li>品优购社区</li>
        </ul>
        <div class="address">地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100</div>
        <div class="beian">京ICP备08001421号京公网安备110108007702
        </div>
    </div>
</div>
</body>

</html>
<script>
    $(function () {
        var code_flag=false;
        $('#code').blur(function (){
            let code=$('#code').val();
            if (code==''){
                alert('验证码不能为空');
                code_flag=false;
                return false;
            }
            code_flag=true;
        })
        //发送短信
        $('#sendCode').click(function () {
            //获取手机号
            let phone = $('#phone').val();
            //正则匹配验证
            if (!/^1[3578]\d{9}$/.test(phone)) {
                alert('手机号不正确');
                return false;
            }
            let second = 60;
            var timer = setInterval(function () {
                second--;
                if (second > 0) {
                    $('#sendCode').html('剩余' + second + '秒');
                    $('#sendCode').prop('disabled', true);
                } else {
                    $('#sendCode').html('发送验证码');
                    $('#sendCode').prop('disabled', false);
                    //结束定时器
                    clearInterval(timer);
                }
            }, 1000);

            //发送手机短信验证码
            $.ajax({
                url: '../getcode',
                type: 'GET',
                dataType: 'JSON',
                data: {
                    phone: phone
                },
                success: function (result) {
                    console.log(result)
                },
                error: function (error) {
                    console.log(error)
                },
            });
        })
        //是否同意用户协议
        $('#reg_btn').click(function (){

            if (!$("input[name=m1]:checked").val()){
                alert('用户是否同意协议');
                return false;
            }

            if (phone_flag && code_flag && pwd_flg && repwd_flag){
                $('form').submit();
            }
        })
    })
</script>
